{% extends "../../base.html" %}

{% block body %}

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a class="this" href="">基础信息</a>
                <a class="this-page" href="">接口管理</a>
                <a><cite>添加接口</cite></a>
            </span>
        </div>
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-md-offset1">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>添加接口</legend>
                </fieldset>
                <div class="layui-form">
                <!--
                <form class="layui-form" action="/base/interface_add/" method="post">
                -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">接口名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="if_name" lay-verify="title" autocomplete="off" placeholder="请输入名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属项目</label>
                        <div class="layui-input-block">
                            <select name="prj_id" lay-filter="aihao">
                                <option value=""></option>
                                {% for prj in prj_list %}
                                    <option value={{ prj.prj_id }}>{{ prj.prj_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">URL</label>
                        <div class="layui-input-block">
                            <input type="text" name="url" placeholder="请输入内容" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">请求方式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="method" value="post" title="post" checked>
                            <input type="radio" name="method" value="get" title="get">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">数据传输</label>
                        <div class="layui-input-block">
                            <input type="radio" name="data_type" value="json" title="json" checked>
                            <input type="radio" name="data_type" value="data" title="data">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">是否加密</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_sign" value="1" title="加密" checked>
                            <input type="radio" name="is_sign" value="0" title="不加密">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">接口描述</label>
                        <div class="layui-input-block">
                            <textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>请求头信息header</legend>
                    </fieldset>
                    <div>
                        <button id="add_request_header" class="layui-btn">添加行</button>
                    </div>

                    <table id="request_header" class="layui-table">
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>含义</th>
                            <th>备注</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>请求信息body</legend>
                    </fieldset>
                    <div>
                        <button id="add_request_body" class="layui-btn">添加行</button>
                    </div>

                    <table id="request_body" class="layui-table">
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>含义</th>
                            <th>备注</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>返回头信息header</legend>
                    </fieldset>
                    <div>
                        <button id="add_response_header" class="layui-btn">添加行</button>
                    </div>

                    <table id="response_header" class="layui-table">
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>含义</th>
                            <th>备注</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>返回信息body</legend>
                    </fieldset>
                    <div>
                        <button id="add_response_body" class="layui-btn">添加行</button>
                    </div>

                    <table id="response_body" class="layui-table">
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>含义</th>
                            <th>备注</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
      


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="sumbit">立即提交</button>
                </div>
            </div>
            </div>
        </div>

    </div>

    </div>

{% endblock %}
{% block script %}
    <script>

    function del_step(obj) {
        var tr = obj.parentNode.parentNode;
        var tbody = tr.parentNode;
        tbody.removeChild(tr);
    }

    $(document).ready(function () {
        //添加请求头参数行
        $("#add_request_header").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td> <td name='var_meaning' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='layui-btn layui-btn-xs layui-bg-red' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#request_header tr:last").after(newRow);
        });

        $("#add_request_body").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td> <td name='var_meaning' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='layui-btn layui-btn-xs layui-bg-red' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#request_body tr:last").after(newRow);
        });

        $("#add_response_header").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td> <td name='var_meaning' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='layui-btn layui-btn-xs layui-bg-red' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#response_header tr:last").after(newRow);
        });

        $("#add_response_body").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td> <td name='var_meaning' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='layui-btn layui-btn-xs layui-bg-red' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#response_body tr:last").after(newRow);
        });

        //删除行
    });

    $('#get_table_data').click(function () {



        var args = {};
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args[i] = data;
        });
        send_data = JSON.stringify(args);
        alert(send_data);
    });

    $('#sumbit').click(function () {

        var if_name = $("input[name='if_name']").val();
        var prj_id = $("select[name='prj_id']").val();
        var url = $("input[name='url']").val();
        var method = $("input[name='method']:checked").val();
        var data_type = $("input[name='data_type']:checked").val();
        var is_sign = $("input[name='is_sign']:checked").val();
        var description = $("textarea[name='description']").val();

        var request_header_data;
        var request_body_data;
        var response_header_data;
        var response_body_data;

        var args = [];
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        request_header_data = JSON.stringify(args);

        var args = [];
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        request_body_data = JSON.stringify(args);

        var args = [];
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        response_header_data = JSON.stringify(args);

        var args = [];
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        response_body_data = JSON.stringify(args);

        $.ajax({
                url: "/base/interface_add/",
                type: "post",
                data: {
                    "if_name": if_name,
                    "prj_id": prj_id,
                    "url": url,
                    "method": method,
                    "data_type": data_type,
                    "is_sign": is_sign,
                    "description": description,
                    "request_header_data": request_header_data,
                    "request_body_data": request_body_data,
                    "response_header_data": response_header_data,
                    "response_body_data": response_body_data,
                },
                // dataType: "json",

                success: function () {
                    alert("保存成功");
                    window.open("/base/interface/");
                },
                error: function () {
                    alert("error!");
                }
            });

    });

</script>
{% endblock %}